<template>
  <div
    v-loading="loading"
    element-loading-text="加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.7)"
  >
    <h2>病案信息</h2>
    <div style="margin: 5%" v-if="user" class="patient-info">
      <el-card shadow="hover">
        <p><strong>姓名:</strong> {{ user.patient.name }}</p>
        <p><strong>性别:</strong> {{ user.patient.gender === 0 ? "女" : "男" }}</p>
        <p><strong>年龄:</strong> {{ user.patient.age }}</p>
        <p><strong>所在医院:</strong> {{ user.patient.hospital }}</p>
        <p><strong>癌种:</strong> {{ user.patient.cancerType }}</p>
        <p><strong>免疫用药情况:</strong> {{ user.patient.immunotherapyMedication }}</p>
        <p>
          <strong>第一次取样时间:</strong>
          {{ formattedDate(user.patient.firstSamplingDate) }}
        </p>
      </el-card>
    </div>

    <div>
      <h2>表位检测结果</h2>
      <div style="margin: 5%" v-for="(table, index) in tables" :key="index">
        <h3>{{ table.name }}</h3>
        <el-table
          :data="table.data"
          style="width: 100%"
          :height="getTableHeight(table.data)"
        >
          <el-table-column
            v-for="key in table.headers"
            :prop="key"
            :key="key"
            :label="key"
            :width="120"
          />
        </el-table>
      </div>
      <div style="height: 80px"></div>
    </div>

    <div>
      <h2>个性化疫苗设计结果</h2>
      <div style="margin: 5%" v-for="article in articles" :key="article.id">
        <div v-html="article.content" class="editor-content-view" />
      </div>
    </div>

    <div>
      <h2>用药临床观察</h2>
      <div style="margin: 5%" v-for="article in clinicalArticles" :key="article.id">
        <div v-html="article.content" class="editor-content-view" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import { getPatientCaseById } from "../../api/patient";
import { selectEpitopeResultByPatientId } from "../../api/epitopeResults";
import { selectVaccineResultsByPatientId } from "../../api/vaccineResults";
import { selectClinicalResultByPatientId } from "../../api/clinicalResults";

// 获取当前路由对象
const route = useRoute();

// 定义用户状态为响应式数据
const user = ref(null);
const loading = ref(false);

// 异步函数：根据 ID 获取病案信息
const fetchUser = async (id: number) => {
  try {
    loading.value = true;
    const response = await getPatientCaseById(id);
    user.value = response.data;
  } catch (error) {
    console.error("获取病案信息失败:", error);
  } finally {
    loading.value = false;
  }
};

// 格式化日期为 "YYYY-MM-DD" 格式
const formattedDate = (date: Date | null) => {
  if (!date) return "";
  const options: Intl.DateTimeFormatOptions = {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  };
  return new Date(date).toLocaleDateString(undefined, options);
};

// 获取患者的表位检测结果
const tables = ref([]);
const getTestResultByPatientId = async () => {
  try {
    const response = await selectEpitopeResultByPatientId(+route.params.patientId);
    tables.value = response.data.map((table, index) => ({
      name: `表格 ${index + 1}`,
      headers: JSON.parse(table.fileHeader),
      data: JSON.parse(table.fileContent),
    }));
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

// 动态计算表格高度
const getTableHeight = (data: any[]) => {
  const rowHeight = 70; // 每行的高度
  const maxTableHeight = 500; // 表格的最大高度
  const tableHeight = data.length * rowHeight;
  return tableHeight > maxTableHeight ? maxTableHeight : tableHeight;
};

// 获取疫苗结果
const articles = reactive([]);
const getVaccine = async () => {
  const response = await selectVaccineResultsByPatientId(+route.params.patientId);
  if (response && response.data) {
    articles.splice(0, articles.length, ...response.data);
  }
};

// 获取临床结果
const clinicalArticles = reactive([]);
const getClinical = async () => {
  const response = await selectClinicalResultByPatientId(+route.params.patientId);
  if (response && response.data) {
    clinicalArticles.splice(0, articles.length, ...response.data);
  }
};

// 组件挂载后获取病案数据
onMounted(() => {
  const patientId = parseInt(route.params.patientId as string, 10);
  fetchUser(patientId);
  getTestResultByPatientId();
  getVaccine();
  getClinical();
});
</script>

<style scoped>
.patient-case {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.patient-info {
  margin-top: 20px;
}

.el-card {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
}

.el-card p {
  margin: 10px 0;
  font-size: 16px;
}

.el-card p strong {
  color: #333;
}

.editor-content-view {
  border: 3px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
  margin-top: 20px;
  overflow-x: auto;
}

.editor-content-view p,
.editor-content-view li {
  white-space: pre-wrap; /* 保留空格 */
}

.editor-content-view blockquote {
  border-left: 8px solid #d0e5f2;
  padding: 10px 10px;
  margin: 10px 0;
  background-color: #f1f1f1;
}

.editor-content-view code {
  font-family: monospace;
  background-color: #eee;
  padding: 3px;
  border-radius: 3px;
}

.editor-content-view pre > code {
  display: block;
  padding: 10px;
}

.editor-content-view table {
  border-collapse: collapse;
}

.editor-content-view td,
.editor-content-view th {
  border: 1px solid #ccc;
  min-width: 50px;
  height: 20px;
}

.editor-content-view th {
  background-color: #f1f1f1;
}

.editor-content-view ul,
.editor-content-view ol {
  padding-left: 20px;
}

.editor-content-view input[type="checkbox"] {
  margin-right: 5px;
}
</style>
